<template>
  <div style="overflow: hidden;">
    <h1>页面 3</h1>
    <LineChart
      :xAxisData="xAxisData2"
      :seriesData="seriesData2"
      title="页面 2 的折线图"
      seriesName="访问量"
      :options="options"
    />
  </div>
</template>

<script>
import LineChart from '@/components/LineChart.vue';


export default {
  name: 'App',
  components: {
    LineChart
  },
  data() {
    return {
      chartData: {
        dates: ['20250205', '20250206', '20250207', '20250208', '20250209', '20250210', '20250211'],
       开机用户数: [0.04, 0.03, 0.02, 0.01, 0.02, 0.03, 0.04],
       点播用户数: [0.03, 0.02, 0.01, 0.02, 0.03, 0.04, 0.03],
       直播用户数: [0.02, 0.01, 0.02, 0.03, 0.04, 0.03, 0.02],
       回放用户数: [0.01, 0.02, 0.03, 0.04, 0.03, 0.02, 0.01]
      },
      // 页面 1 的数据
      xAxisData1: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      seriesData1: [120, 200, 150, 80, 70, 110, 130],
      // 页面 2 的数据
      xAxisData2: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
      seriesData2: [300, 280, 250, 260, 270, 320, 310],
      options: {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#333',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        legend: {
          left: 'right', // 添加此行，将图例居左显示
          top: 'top',
          textStyle: {
            color: '#666',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data:  ['20250205', '20250206', '20250207', '20250208', '20250209', '20250210', '20250211'],
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 0.05,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            formatter: function (value) {
              return value + 'k';
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e0e0e0',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '开机用户数',
            type: 'line',
            data: [0.04, 0.03, 0.02, 0.01, 0.02, 0.03, 0.04],
            symbol: 'none',
            lineStyle: {
              color: '#f87979',
              width: 2
            }
          },
          {
            name: '点播用户数',
            type: 'line',
            data: [0.03, 0.02, 0.01, 0.02, 0.03, 0.04, 0.03],
            symbol: 'none',
            lineStyle: {
              color: '#79aaf8',
              width: 2
            }
          },
          {
            name: '直播用户数',
            type: 'line',
            data: [0.04, 0.03, 0.02, 0.01, 0.02, 0.03, 0.04],
            symbol: 'none',
            lineStyle: {
              color: '#79f87e',
              width: 2
            }
          },
          {
            name: '回放用户数',
            type: 'line',
            data: [0.04, 0.03, 0.02, 0.01, 0.02, 0.03, 0.04],
            symbol: 'none',
            lineStyle: {
              color: '#f8f879',
              width: 2
            }
          }
        ]
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 20px;
}
</style>